<style scoped>
/* 头部导航栏样式 */
.header {
  height: 80px;
  background-color: rgba(24, 144, 255, 1);
  border: none;
  display: flex;

  align-items: center;
  color: #ffffff;
  font-size: 16px;
  position: relative;
  padding: 0 70px;
}

.header a {
  color: #ffffff;
  width: 120px;
  font-size: 14px;
  text-align: center;
}

.header span.logo {
  font-size: 40px;
  margin-right: 30px;
}
/* 头像 */
.demo-basic {
  text-align: center;
}

.demo-basic .sub-title {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}

.demo-basic .demo-basic--circle,
.demo-basic .demo-basic--square {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.demo-basic .block:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}

.demo-basic .block {
  flex: 1;
}

.demo-basic .el-col:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}

/* 右侧信息 */
.admin {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 25%;
}

.admin span {
  margin: 0 10px;
}

.el-button {
  border-radius: 20px;
  height: 20px;
  font-size: 12px;
  background-color: #ffffff;
  color: #239ffe;
}
</style>
<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header">
        <span class="logo">LOGO</span>
        <router-link to="/index/shouye">首页</router-link>
        <router-link to="/index/jiaxiaohudong">家校互动</router-link>
        <router-link to="/index/juxiaotongzhi">局校通知</router-link>
        <router-link to="/index/xiaoxitongji">消息统计</router-link>
        <router-link to="/index/yonghutongzhi">用户统计</router-link>
        <router-link to="/index/xuexiaoguanli">学校管理</router-link>
        <div class="admin">
          <el-row class="demo-avatar demo-basic">
            <el-col :span="12">
              <div class="demo-basic--circle">
                <div v-for="size in sizeList" :key="size" class="block">
                  <el-avatar :size="size" :src="circleUrl" />
                </div>
              </div>
            </el-col>
          </el-row>
          <span>test </span>
          <el-dropdown @command="handleCommand">
            <el-button type="primary">
              管理员<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="setting">个人设置</el-dropdown-item>
                <el-dropdown-item @click="logOut" command="exit"
                  >退出登录</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <el-main><router-view /></el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs } from "vue";
import { uesUseinfoStore } from "../../stores/useinfo";
import { useRouter } from "vue-router";
var router = useRouter();
var useinfoStore = uesUseinfoStore();

const state = reactive({
  circleUrl:
    "https://cdn7.axureshop.com/demo/2117333/images/%E9%A6%96%E9%A1%B5/u584.png",

  sizeList: [""] as const,
});
const { circleUrl, sizeList } = toRefs(state);

const logOut = () => {
  //删除已保存的用户信息
  useinfoStore.remove_useinfo();
  //跳转登录页
  router.push("/login");
};
</script>